<template>
	<view :key="refreshKey">
		<view class="team-member">
			<!-- <view class="team-member-title">
				<view class="team-member-title-l">团队奖励制度</view>
			</view> -->
			<view class="custom-table">
				<!-- <view class="custom-table-tr">
					<view class="custom-table-th">
						等级
					</view>
					<view class="custom-table-th">
						<view>有效投资人数</view>
						<view>个人投资总额</view>
						<view>团队投资总额</view>
					</view>
					<view class="custom-table-th">
						团队奖励
					</view>
					<view class="custom-table-th">
						操作
					</view>
				</view> -->
				<view class="custom-table-tr" v-for="record in records" style="animation-duration: 2s;">
					<view class="custom-table-td-link">
						<view class="
						with-icon">{{record.levelName}}团队奖</view>
						<view>团队奖励<span>{{record.rewardAmount}}</span></view>
					</view>
					<view class="hj">
						<view class="hj-2">
							<div class="hj-2-1">
								<div class="hj-2-1-t">有效投资团队</div>
								<div class="hj-2-1-e">{{record.numberOfInvestor}}</div>
							</div>
							<div class="hj-2-1">
								<div class="hj-2-1-t">个人投资总额</div>
								<div class="hj-2-1-e">{{record.selfBuyInAmount}}</div>
							</div>
							<div class="hj-2-1">
								<div class="hj-2-1-t">团队投资总额</div>
								<div class="hj-2-1-e">{{record.teamBuyInAmount}}</div>
							</div>
						</view> 
						<!-- <view class="custom-table-td">
							<view v-show="record.state == '1'">
								<uv-text type="error" text="已领取" size="12"></uv-text>
							</view>
							<view v-show="record.state == '2'">
								<uv-text type="success" text="点击领取" size="12" @click="getTeamReward(record.levelNum)"></uv-text>
							</view>
							<view v-show="record.state == '3'">未达标</view>
						</view> -->
				    </view>
					<view class="butt butt-1" v-show="record.state == '1'">
						 已领取
					</view>
					<view class="butt butt-2" v-show="record.state == '2'" @click="getTeamReward(record.levelNum)">
						 点击领取
				   </view>
				   <view class="butt butt-3" v-show="record.state == '3'">
					     未达标
			       </view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				records: [],
				refreshKey:0
			}
		},
		onLoad() {
			this.findMyTeamReward();
		},
		onShow(){
			this.refreshKey += 1;
		},
		methods: {
			
			getTeamReward(levelNum) {
				var that = this;
				uni.$uv.http.post('/teamReward/getTeamReward', {
					levelNum: levelNum,
				}).then(res => {
					uni.showToast({
						icon: 'success',
						title: '领取成功!',
						duration: 2000,
						complete: function() {
							setTimeout(() => {
								uni.navigateBack();
							}, 2000);
						}
					});
				});
			},

			findMyTeamReward() {
				var that = this;
				uni.$uv.http.get('/teamReward/findMyTeamReward', {
					params: {}
				}).then(res => {
					that.records = res.data;
				});
			},
		}
	}
</script>

<style scoped lang="less">
body {
	height: auto !important;
	background:#f3f5ff;
}
.hj{
	background-size: 100% 100%;
	height:150rpx;
	border-radius:20rpx;
	margin-top: 60rpx;
	background-color: #f3f5ff;
	.hj-1{
		width: 100%;
		text-align: center;
		border-bottom: 1px solid #E4E5EB;
		padding-top: 20rpx;
		.hj-1-1{
			font-size: 24rpx;
			padding-top: 10rpx;
		}
		.hj-1-2{
			margin-top: 10rpx;
			font-size: 32rpx;
			font-weight: 550;
		}
	}
	.hj-2{
		width: 100%;
		display: flex;
		margin-top: 20rpx;
		justify-content: space-around;
		.hj-2-1{
		    text-align: center;
			width: 33%;
			.hj-2-1-t{
				margin-top: 30rpx;
				font-size: 24rpx;
			}
			.hj-2-1-e{
				margin-top: 10rpx;
				font-size: 40rpx;
			}
		}
	}
}
.butt{
	width: 380rpx;
	border-radius:40rpx;
	border:none;
	margin: 0 auto;
	margin-top: 40rpx;
	background-color: #EDF1F4;
	text-align: center;
	height: 70rpx;
	line-height: 70rpx;
	font-size: 28rpx;
}
.butt-1{
	background-color: #8C949D;
	color: #FFF;
}
.butt-2{
	background-color: #FEE19E;

}
.butt-2{

}
.custom-table {
		.table-leve {
			width: 17%;
			margin: 0 10rpx;
			text-align: center;
			
		}

		.table-number {
			width: 168rpx;

			.item1 {
				margin-bottom: 16rpx;
			}

			.number-item {
				display: flex;
				font-weight: 400;
				font-size: 20rpx;
				color: #FFFFFF;
				line-height: 20rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;

				.number {
					color: #E4D494;
					margin-left: 8rpx;
				}
			}
		}

		.table-name {
			flex: 1;
			text-align: left;
		}

	}

	.custom-table-tr {
		padding: 0rpx 20rpx;
		margin-top: 30rpx;
		border-radius:20rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		background-color: #FFF;
		height: 450rpx;
		
	}
	.custom-table-tr-th {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		border-bottom: 2rpx solid  rgba(255,255,255,0.1);
		padding: 0 20rpx;
		
		
	}

	.custom-table-th {
		height: 64rpx;
		text-align: center;
		padding: 8rpx 4rpx;
		display: flex;
		flex-direction: row;
		flex-direction: column;
		justify-content: center;
		font-weight: 400;
		font-size: 24rpx;
		color: rgba(255,255,255,0.4);
		line-height: 24rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
		text-align: center;
	}

	.custom-table-td {
		text-align: center;
		padding: 8rpx 4rpx;
		display: flex;
		flex-direction: row;
		flex-direction: column;
		justify-content: center;
		font-size: 22rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #FFFFFF;
		line-height: 24rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
		
	}

	.custom-table-td-link {
		display: flex;
		padding-top: 20rpx;
		font-size: 30rpx;
		letter-spacing: 2rpx;
		justify-content: space-between;
	}
	.custom-table-td-link view span{
		color:#ff7c01;
	}
	.with-icon::before {
	content: ''; /* 或者 content: '🏆' 加 emoji */
	display: inline-block;
	width: 30rpx;
	height: 30rpx;
	background-image: url('../../static/img/jb.png'); /* 替换为你的图标路径 */
	background-size: contain;
	background-repeat: no-repeat;
	margin-right: 6px;
	vertical-align: middle;
	}

	.custom-table-td-highlight {
		color: #d0021b;
		font-weight: bold;
	}

	.statistic-item-label {
		color: #fff;
		letter-spacing: 2rpx;
		font-size: 26rpx;
		padding-bottom: 32rpx;
	}

	.statistic-item-value {
		color: #fff;
		font-size: 26rpx;
	}

	.statistic-item {
		width: 43%;
		background: hsla(0, 0%, 100%, .2);
		border-radius: 16rpx;
		padding: 32rpx 20rpx;
		margin-bottom: 32rpx;
	}

	.statistic-items {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.statistic {
		margin: 32rpx 16rpx;
		background: linear-gradient(180.44deg, #0068b7, #b9d4e9);
		border-radius: 16rpx;
		padding: 16rpx 16rpx;
	}
	

	.statistic-title {
		color: #fff;
		letter-spacing: 2rpx;
		font-size: 34rpx;
		margin-bottom: 32rpx;
	}
</style>